<template>
  <div class="container">
    <el-row class="p-t-15">
      <el-col>
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="英柬文" name="first"/>
          <el-tab-pane label="中文" name="second"/>
        </el-tabs>
      </el-col>
    </el-row>
    <!-- 搜索 -->
    <el-card>
      <el-row>
        <el-col>
          <label>专题名称：</label>
          <el-input
            v-model="listQuery.text"
            size="small"
            class="w-200"
            clearable
          />
          <date-range-picker
            v-model="datePicker1"
            class="w-240"
            size="small"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            @change="timeChange"/>
          <el-button type="primary" icon="el-icon-search" size="small" @click="search('search')">搜索</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-row :gutter="20" class="p-t-15">
      <!-- 上架状态专题总数 -->
      <el-col :span="12">
        <el-card class="box-card">
          <div class="thematic-count-card">
            <el-row>
              <el-col :xl="8" class="card-border-right">
                <h3>上架状态专题总数</h3>
                <div class="card-text"><span class="count">232323</span></div>
              </el-col>
              <el-col :xl="8" class="card-border-right">
                <h3>专题访问PV(2020/10/01至今)</h3>
                <div class="card-text"><span class="count">232323</span></div>
              </el-col>
              <el-col :xl="8">
                <h3>专题访问UV(2020/10/01至今)</h3>
                <div class="card-text"><span class="count">232323</span></div>
              </el-col>
            </el-row>
          </div>
        </el-card>
        <el-card class="box-card">
          <div class="thematic-count-card">
            <el-row>
              <el-col :xl="12" class="card-border-right">
                <h3>昨日专题访问PV</h3>
                <div class="card-text"><span class="count">2323232</span><span>较前日</span><img class="arrow-icon" src="../../../assets/icon/up-arrow.svg" alt=""><span class="blue-text">10%</span></div>
                <div class="card-text"><span class="count">2323232</span><span>较前日</span><img class="arrow-icon" src="../../../assets/icon/down-arrow.svg" alt=""><span class="red-text">10%</span></div>
              </el-col>
              <el-col :xl="12">
                <h3>昨日专题访问UV</h3>
                <div class="card-text"><span class="count">2323232</span><span>较前日</span><img class="arrow-icon" src="../../../assets/icon/up-arrow.svg" alt=""><span class="blue-text">10%</span></div>
                <div class="card-text"><span class="count">2323232</span><span>较前日</span><img class="arrow-icon" src="../../../assets/icon/down-arrow.svg" alt=""><span class="red-text">10%</span></div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
      <!-- 访问来源类别占比 -->
      <el-col :span="12" class="box-card">
        <el-card>
          <div slot="header" class="clearfix">
            <span>访问来源类别占比</span>
          </div>
          <div class="clearfix">
            <div class="button-list">
              <el-button-group >
                <el-button :type="tabIndex ===1 ? 'primary': ''" @click="tabChange(1)">访问PV</el-button>
                <el-button :type="tabIndex ===2 ? 'primary': ''" @click="tabChange(2)">访问UV</el-button>
              </el-button-group>
            </div>
          </div>
          <!-- 访问PV -->
          <div v-show="tabIndex===1" class="table-tab">
            <div id="rate1" :style="{width: '778px', height: '240px'}"/>
          </div>
          <!-- 访问UV -->
          <div v-show="tabIndex===2" class="table-tab">
            <div id="rate2" :style="{width: '778px', height: '240px'}"/>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div class="box-card">
      <el-card>
        <div id="lineChart" :style="{width: '100%', height: '480px'}"/>
      </el-card>
    </div>
    <div class="box-card">
      <el-card>
        <div slot="header" class="clearfix">
          <span>每日报表</span>
        </div>
        <div class="clearfix">
          <div class="button-list">
            <el-button :type="tabIndex ===2 ? 'primary': ''" @click="toExport()">导出</el-button>
          </div>
        </div>
        <div class="list-content">
          <el-table
            v-loading="listLoading"
            id="newsTable"
            ref="newsTable"
            :data="tableData"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
            style="width: 100%;margin-top:20px;">
            <el-table-column prop="id" label="日期"/>
            <el-table-column prop="pu" label="访问PV"/>
            <el-table-column prop="vu" label="访问UV"/>
            <el-table-column prop="read" label="专题内容阅读"/>
          </el-table>
          <div v-if="total>0" class="block fr">
            <el-pagination
              :current-page="listQuery.index"
              :page-sizes="[20, 50, 100]"
              :page-size="listQuery.size"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange" />
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts';
import { dateShortcutKeyJS } from '@/mixins/index.js';
import timeUtils from '@/utils/timeHandle.js';
import { exportJsonToExcel, formatJson } from '@/utils/excel/Export2Excel';
import '@/assets/css/common/style.scss';
export default {
  mixins: [dateShortcutKeyJS],
  data() {
    return {
      tableName: {
        add: '英柬文',
        pass: '中文'
      },
      activeName: 'first',
      tabIndex: 1, // 表格tab
      legend1: ['频道', '首页-推荐', '首页-推广', '弹窗', '专题-导航', '其他'],
      listRatio: [
        {
          'date': '2020-09-19',
          'strategy_0': 5.4,
          'strategy_-2': 2.4,
          'strategy_-1': 3.4
        },
        {
          'date': '2020-09-29',
          'strategy_0': 15.66,
          'strategy_-2': 5.66,
          'strategy_-1': 8.66
        },
        {
          'date': '2020-09-18',
          'strategy_0': 12.39,
          'strategy_-2': 3.39,
          'strategy_-1': 1.39
        },
        {
          'date': '2020-09-28',
          'strategy_0': 8.53,
          'strategy_-2': 9.53,
          'strategy_-1': 2.53
        },
        {
          'date': '2020-09-17',
          'strategy_0': 5.57,
          'strategy_-2': 3.57,
          'strategy_-1': 6.57
        },
        {
          'date': '2020-09-27',
          'strategy_0': 5.16,
          'strategy_-2': 7.16,
          'strategy_-1': 4.16
        },
        {
          'date': '2020-09-16',
          'strategy_0': 4.68,
          'strategy_-2': 3.68,
          'strategy_-1': 2.68
        },
        {
          'date': '2020-09-11',
          'strategy_0': 4.36,
          'strategy_-2': 6.36,
          'strategy_-1': 7.36
        },
        {
          'date': '2020-09-22',
          'strategy_0': 4.45,
          'strategy_-2': 5.45,
          'strategy_-1': 9.45
        },
        {
          'date': '2020-09-10',
          'strategy_0': 3.11,
          'strategy_-2': 4.11,
          'strategy_-1': 6.11
        },
        {
          'date': '2020-09-21',
          'strategy_0': 4.66,
          'strategy_-2': 3.66,
          'strategy_-1': 6.66
        },
        {
          'date': '2020-09-30',
          'strategy_0': 9.71,
          'strategy_-2': 4.71,
          'strategy_-1': 7.71
        },
        {
          'date': '2020-09-15',
          'strategy_0': 4.37,
          'strategy_-2': 3.37,
          'strategy_-1': 5.37
        },
        {
          'date': '2020-09-25',
          'strategy_0': 2.1,
          'strategy_-2': 1.1,
          'strategy_-1': 3.1
        },
        {
          'date': '2020-09-14',
          'strategy_0': 3.64,
          'strategy_-2': 4.64,
          'strategy_-1': 6.64
        },
        {
          'date': '2020-09-24',
          'strategy_0': 4.27,
          'strategy_-2': 5.27,
          'strategy_-1': 6.27
        },
        {
          'date': '2020-09-23',
          'strategy_0': 9.94,
          'strategy_-2': 8.94,
          'strategy_-1': 3.94
        },
        {
          'date': '2020-09-12',
          'strategy_0': 2.12,
          'strategy_-2': 3.12,
          'strategy_-1': 5.12
        },
        {
          'date': '2020-10-01',
          'strategy_0': 5.02,
          'strategy_-2': 3.02,
          'strategy_-1': 2.02
        }
      ],
      tableData: [{
        'id': 666,
        'pu': 223,
        'vu': 23,
        'read': 2323
      }, { 'id': 12, 'pu': 223,
        'vu': 23, 'read': 2323 }],
      listLoading: false,
      submitLoading: false,
      total: 1,
      listQuery: {
        index: 1,
        size: 10,
        text: ''
      },
      datePicker1: [
        timeUtils.timeHandle(new Date().getTime() - 3600 * 1000 * 24 * 6, 'date'),
        timeUtils.timeHandle(new Date().getTime(), 'date')
      ], // 时间
      separatedDays: null // 搜索时间相隔天数
    };
  },
  watch: {
    activeName() {
    }
  },
  mounted() {
    this.getData1();
    this.getData2();
    this.getData3();
  },
  methods: {
    /* tab切换 */
    tabChange(val) {
      this.tabIndex = val;
    },
    getData1() {
      this.$nextTick(function() {
        this.updateEchart1();
      });
    },
    getData2() {
      this.$nextTick(function() {
        this.updateEchart2();
      });
    },
    getData3() {
      var list = {
        'strategy_0': [],
        'strategy_-2': [],
        'strategy_-1': [],
        'date': []
      };

      for (var w = 0; w < this.listRatio.length; w++) {
        Object.keys(list).forEach(key => {
          list[key].push(this.listRatio[w][key]);
        });
      }

      this.listRatio = list;
      this.$nextTick(function() {
        this.updateEchart3();
      });
    },
    /* pv图表 */
    updateEchart1() {
      var myChart = echarts.init(document.getElementById('rate1'));
      myChart.showLoading();

      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 10,
          data: this.legend1
        },
        series: [
          {
            name: '访问PV',
            type: 'pie',
            radius: ['40%', '55%'],
            label: {
              formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
              backgroundColor: '#eee',
              borderColor: '#aaa',
              borderWidth: 1,
              borderRadius: 4,
              rich: {
                a: {
                  color: '#999',
                  lineHeight: 22,
                  align: 'center'
                },
                hr: {
                  borderColor: '#aaa',
                  width: '100%',
                  borderWidth: 0.5,
                  height: 0
                },
                b: {
                  fontSize: 16,
                  lineHeight: 33
                },
                per: {
                  color: '#eee',
                  backgroundColor: '#334455',
                  padding: [2, 4],
                  borderRadius: 2
                }
              }
            },
            data: [
              { value: 335, name: '频道' },
              { value: 310, name: '首页-推荐' },
              { value: 234, name: '首页-推广' },
              { value: 135, name: '弹窗' },
              { value: 1048, name: '专题-导航' },
              { value: 251, name: '其他' }
            ]
          }
        ]
      };
      myChart.setOption(option, true);
      myChart.hideLoading();
    },
    /* uv图表 */
    updateEchart2() {
      var myChart = echarts.init(document.getElementById('rate2'));
      myChart.showLoading();

      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 10,
          data: this.legend1
        },
        series: [
          {
            name: '访问UV',
            type: 'pie',
            radius: ['40%', '55%'],
            label: {
              formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
              backgroundColor: '#eee',
              borderColor: '#aaa',
              borderWidth: 1,
              borderRadius: 4,
              rich: {
                a: {
                  color: '#999',
                  lineHeight: 22,
                  align: 'center'
                },
                hr: {
                  borderColor: '#aaa',
                  width: '100%',
                  borderWidth: 0.5,
                  height: 0
                },
                b: {
                  fontSize: 16,
                  lineHeight: 33
                },
                per: {
                  color: '#eee',
                  backgroundColor: '#334455',
                  padding: [2, 4],
                  borderRadius: 2
                }
              }
            },
            data: [
              { value: 32, name: '频道' },
              { value: 232, name: '首页-推荐' },
              { value: 3433, name: '首页-推广' },
              { value: 234, name: '弹窗' },
              { value: 5665, name: '专题-导航' },
              { value: 45, name: '其他' }
            ]
          }
        ]
      };
      myChart.setOption(option, true);
      myChart.hideLoading();
    },
    /* 拆线图 */
    updateEchart3() {
      var myChart = echarts.init(document.getElementById('lineChart'));
      myChart.showLoading();
      const option = {
        title: {
          text: '数据趋势'
        },
        color: this.$store.state.app.eChartColor,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['访问PV', '访问UV', '专题内容阅读'],
          right: 60,
          top: 10
        },
        grid: {
          left: 60,
          right: 60
        },
        xAxis: [
          {
            type: 'category',
            data: this.listRatio['date']
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '(次数)',
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '访问PV',
            type: 'line',
            data: this.listRatio['strategy_0']
          },

          {
            name: '访问UV',
            type: 'line',
            data: this.listRatio['strategy_-1']
          },

          {
            name: '专题内容阅读',
            type: 'line',
            data: this.listRatio['strategy_-2']
          }
        ]
      };

      myChart.setOption(option, true);
      myChart.hideLoading();
    },
    // 分页改变
    handleSizeChange(val) {
      this.page.pageSize = val;
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
    },
    /* 时间选择 */
    timeChange(time) {
      if (!time) return;
      const startTime = Date.parse(time[0]);
      const endTime = Date.parse(time[1]);
      const Days = Math.floor(Math.abs(endTime - startTime) / (24 * 3600 * 1000));
      this.separatedDays = Days;
      if (Days == 0) {
        this.listQuery.dateType = 0;
      } else if (Days <= 30 && Days > 0) {
        this.listQuery.dateType = 1;
      } else if (Days > 30 && Days <= 48) {
        this.listQuery.dateType = 2;
      } else if (Days > 48) {
        this.listQuery.dateType = 3;
      }
    },
    search() {
      if (!this.datePicker1) {
        this.$message.warning('请输入搜索时间', true);
        return;
      }
      if (this.separatedDays === 0) {
        this.onlyOneDay = true;
      } else {
        this.onlyOneDay = false;
      }
      this.listQuery.text = this.listQuery.text.replace(/(^\s*)|(\s*$)/g, '');
      this.listQuery.startTime = this.datePicker1[0];
      this.listQuery.endTime = this.datePicker1[1];
    }, // 搜索
    /* 导出 */
    toExport() {
      const tableData = this.tableData;
      const tHeader = [
        '日期',
        '访问PV',
        '访问UV',
        '专题内容阅读'
      ];
      const tKey = [
        'id',
        'pu',
        'vu',
        'read'
      ];
      const title = '每日报表';
      // 数据来源
      const data = formatJson(tKey, tableData); // 数据格式化
      const newDay = timeUtils.timeHandle(new Date().getTime(), 'date');
      const fileName = `${title}${newDay}`; // 导出时文件名
      exportJsonToExcel(tHeader, data, fileName); // 导出文件
    }

  }
};
</script>
<style lang="scss" scoped>
.w-150 {
  width: 150px;
}
/* 标签盒子 */
.box-card {
  margin: 0 0 20px 0;
}
.thematic-count-card {
  text-align: center;
  color: rgba(0, 0, 0, 0.447058823529412);
  font-size: 14px;
  .card-border-right {
    border-right: 1px solid #e9e9e9;
  }
  h3 {
    margin: 0 0 10px 0;
  }
  .card-text {
    line-height: 36px;
    span {
      margin: 0 5px;
    }
  }
  .count {
    color: rgba(0, 0, 0, 0.847058823529412);
    font-size: 24px;
  }
  .arrow-icon {
    display: inline-block;
  }
  .blue-text {
    color: #1A94FF;
  }
  .red-text {
    color: #FB3F20;
  }
}
.w-200 {
  width: 200px;
}
/* 表格tab */
.button-list {
  float: right;
}
.list-content {
  overflow: hidden;
}
.block {
  margin: 20px 0 0 0;
}
</style>

